@mixin top-flag($color) {
    width: 167px;
    height: 127px;
    position: absolute;
    top: 38px;
    left: -5px;
    .flag-circle {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid $color;
        .in-circle {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid $color;
        }
    }
    .flag-line {
        position: absolute;
        left: 14px;
        top: 0;
        width: 1px;
        height: 100px;
        background-color: $color;
        &:before {
            content: "";
            position: absolute;
            top: -1.5px;
            left: -2.53px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: $color;
        }
    }
    .flag-content {
        position: absolute;
        top: 8px;
        left: 14.5px;
        width: 174px;
        height: 56px;
        padding: 8px 5px 8px 14px;
        background-color: rgba($color, $alpha: 0.1);
        border-radius: 1px;
        p {
            margin: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .content-title {
            color: $color;
            font-weight: bold;
            font-size: 12px;
            span {
                &:first-of-type {
                    margin-right: 8px;
                }
            }
        }
    }
}

@mixin bottom-flag($color) {
    width: 167px;
    height: 127px;
    position: absolute;
    top: 137px;
    left: -5px;
    .flag-circle {
        position: absolute;
        left: 0;
        top: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid $color;
        .in-circle {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid $color;
        }
    }
    .flag-line {
        position: absolute;
        left: 13.5px;
        bottom: 0;
        width: 1px;
        height: 100px;
        background-color: $color;
        &:before {
            content: "";
            position: absolute;
            bottom: -1.5px;
            left: -3px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: $color;
        }
    }
    .flag-content {
        position: absolute;
        bottom: 8px;
        left: 14.5px;
        width: 174px;
        height: 56px;
        padding: 8px 5px 8px 14px;
        background-color: rgba($color, $alpha: 0.1);
        border-radius: 1px;
        p {
            margin: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .content-title {
            color: $color;
            font-weight: bold;
            font-size: 12px;
            span {
                &:first-of-type {
                    margin-right: 8px;
                }
            }
        }
    }
}

.track-show {
    height: 302px;
    .show-container {
        width: 80%;
        // width: 980px;
        height: 302px;
        margin: 0 auto;
        overflow: hidden;
    }
    .next-page {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-image: url(../../pages/app/images/arrow.png);
        background-size: 100% 100%;
        transition: all .5s;
        z-index: 10;
        &:hover {
            right: 15px;
            width: 40px;
            height: 40px;
            opacity: 0.75;
        }
    }
    .prev-page {
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translateY(-50%) rotate(180deg);
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-image: url(../../pages/app/images/arrow.png);
        background-size: 100% 100%;
        transition: all .5s;
        z-index: 10;
        &:hover {
            left: 15px;
            width: 40px;
            height: 40px;
            opacity: 0.75;
        }
    }
    .circle-container {
        width: 10000000px;
        display: inline-block;
        transition: all .5s;
        position: relative;
        height: 302px;
        left: 0;
        .circle-one {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            display: inline-block;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background-color: #ffffff;
            border: 1px solid #cccccc;
            margin-right: 10px;
        }
        .top-flag-blue {
            @include top-flag(#609beb);
        }
        .top-flag-green {
            @include top-flag(#3cc3ae);
        }
        .top-flag-red {
            @include top-flag(#ed7757);
        }
        .bottom-flag-blue {
            @include bottom-flag(#609beb);
        }
        .bottom-flag-green {
            @include bottom-flag(#3cc3ae);
        }
        .bottom-flag-red {
            @include bottom-flag(#ed7757);
        }
    }
}